/**
 * 全站路由配置
 *
 * @author xuyh
 * @email xuyh0817@foxmial.com
 * @date 2020年7月16日 19:26:57
 *
 * 建议:
 * 代码中路由统一使用name属性跳转(不使用path属性)
 *
 * path属性  vue router 会使用path做动态路由匹配，比如
 *
 * 匹配所有路径 path: '*'
 *
 * 匹配以 `/user-` 开头的任意路径
 * path: '/user-*'
 *
 * 动态路径参数 以冒号开头
 * path: '/user/:id'
 *
 *
 */
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

// 引入组件
const _import = function (file) {
    return () => import('@/views/' + file + '.vue')
}

const router = new Router({
    // hase方式   h5的方式history 充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
    mode: 'hash',
    routes: [
        {path: '/index', component: _import('index'), name: 'index', meta: {title: 'index'}},
        {path: '/home', component: _import('home'), name: 'home', meta: {title: 'home'}},
        {path: '/a', component: _import('a'), name: 'a', meta: {title: 'a'}},
        {path: '/b', component: _import('b'), name: 'b', meta: {title: 'b'}},
    ]
})
// 设置标识跳转路径
sessionStorage.setItem("demo-3", "0")
// 跳转前的钩子函数
router.beforeEach((to, from, next) => {
    console.log(to)
    console.log(from)
    let item = sessionStorage.getItem("demo-3")
    if (item === "0") {
        sessionStorage.setItem("demo-3", "1")
        next({
            name: 'home'
        }) // 跳转
    } else {
        next()
    }

})
// 跳转后的钩子函数
router.afterEach(to => {
    setTitle(to)
    window.scrollTo(0, 0)
})

/**
 * @description 根据当前跳转的路由设置显示在浏览器标签的title
 * @param {Object} routeItem 路由对象
 */
const setTitle = (routeItem) => {
    let title = routeItem.meta && routeItem.meta.title ? routeItem.meta.title : ''
    window.document.title = title ? `${title}-VUE培训` : title
}

export default router
